<template>
  <div class="app-container">
    <el-form
    :model="queryParams"
    ref="queryForm"
    size="small"
    v-show="showSearch"
    :inline="true"
  >
    <el-form-item label="股道" prop="trackName">
      <el-input
        v-model="queryParams.trackName"
        placeholder="请输入股道"
        style="width: 220px"
        maxlength="15"
        show-word-limit
        clearable
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item label="车号" prop="carCode">
      <el-input
        v-model="queryParams.carCode"
        placeholder="请输入车号"
        clearable
        style="width: 220px"
        maxlength="10"
        show-word-limit
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item label="插号志人" prop="insertPersonName">
      <el-input
        v-model="queryParams.insertPersonName"
        placeholder="请输入插号志人"
        clearable
        style="width: 220px"
        maxlength="10"
        show-word-limit
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item>
      <div class="searchReset">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </div>
    </el-form-item>
  </el-form>
  <el-row :gutter="10" class="mb8">
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  </el-row>
      <div :class="eleTabTop <= 85 ? 'eleTab' : ''" class="informationTab" ref="eleTab">
          <el-table v-loading="loading" :data="TeamList">
              <el-table-column label="序号" align="center" type="index" width="55" />
              <el-table-column label="股道" prop="trackName" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="列位" prop="complete" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="车号" prop="carCode" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="插号志人" prop="insertPersonName" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="开始时间" prop="startTime" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="授权人" prop="removeName" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="授权状态" prop="removeStateName" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                  <template slot-scope="scope">
                  <!-- <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    >撤号</el-button
                  > -->
                  <el-button
                  v-if="scope.row.removeState == '0'"
                    size="mini"
                    type="text"
                     v-hasPermi="['workPlan:workPlan:auth']"
                    @click="handleauthorization(scope.row)"
                    >授权</el-button
                  >
                    <el-button
                     v-if="scope.row.removeState == '1'"
                    size="mini"
                    type="text"
                    @click="handleremoves(scope.row)"
                    >撤除</el-button
                  >
</template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
<!-- 授权人员 -->
      <el-dialog title="授权人员" :visible.sync="openUsers" width="750px" append-to-body>
    <div style="height: 70vh; overflow-y: scroll; padding-right: 15px">
      <el-table
      :data="usersList"
      @row-click="singleElection"
    >
      <el-table-column label="序号" width="65">
<template slot-scope="scope">
  <el-radio class="radio" v-model="templateRadio" :label="scope.$index+1">
      &nbsp;</el-radio>
</template>
  </el-table-column>
      <!-- <el-table-column label="序号" align="center" type="index" width="55" /> -->
      <el-table-column
        label="姓名"
        prop="userName"
        min-width="180"
         align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="班组"
        prop="workTeamName"
        min-width="180"
         align="center"
        :show-overflow-tooltip="true"
      />
    </el-table>
    </div>
       <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFormusers">确 定</el-button>
      <el-button @click="cancelusers">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {
  listTeams,
  updateteam,
  updateteamauth,
  userlist
} from "@/api/urgencyRemove";

export default {
  name: "WorkTeam",
  data() {
      return {
        showSearch:true,
          templateRadio: '',
          usersList: [],
          openUsers: false,
          eleTabTop: 0, //表格容器eleTabTop距浏览器顶部距离
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 作业班组表格数据
          TeamList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
              pageNum: 1,
              pageSize: 10,
              trackName:null,
              carCode:null,
              insertPersonName:null
          },
          teamId: '',
          updatequerys:{
            id:'',
            removeId:''
          }
      };
  },
  created() {
      this.getList();
  },
  mounted() {
      // 滚动条的获取
      this.handleScrollx();
      window.addEventListener("scroll", this.handleScrollx, true);
  },
  activated() {
      //获取表格容器距页面头部的距离
      this.handleScrollx();
  },
  destroyed() {
      window.removeEventListener("scroll", this.handleScrollx, true);
  },
  methods: {
      singleElection(row) {
          this.templateRadio = row.id;
          this.updatequerys.removeId = row.id;
      },
      submitFormusers() {
          updateteamauth(this.updatequerys).then(res => {
              this.msgSuccess("授权成功");
              this.openUsers = false;
              this.getList();
          })
      },
      handleremoves(row) {
          let params = {}
          params.id = row.id;
          params.removeId = null;
          this.$modal
              .confirm("是否确认撤除授权？")
              .then(function() {
                  return updateteamauth(params);
              })
              .then(() => {
                  this.getList();
                  this.$modal.msgSuccess("修改成功");
              })
              .catch(() => {});
      },
      cancelusers() {
          this.openUsers = false;
      },
      handleauthorization(row) {
          this.teamId = row.id;
          this.updatequerys.id = row.id;
          this.openUsers = true;
          this.templateRadio = undefined;
          userlist().then(res => {
              this.usersList = res.rows;
          })
      },
      //获取表格容器距页面头部的距离
      handleScrollx() {
          this.eleTabTop = this.$refs.eleTab.getBoundingClientRect().top;
      },
          /** 搜索按钮操作 */
  handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
  },
      /** 重置按钮操作 */
      resetQuery() {
    this.resetForm("queryForm");
    this.handleQuery();
  },
      /** 查询作业班组列表 */
      getList() {
          this.loading = true;
          listTeams(this.queryParams).then((response) => {
              this.TeamList = response.rows;
              this.total = response.total;
              this.loading = false;
          });
      },
      // 取消按钮
      cancel() {
          this.open = false;
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
          const id = row.id;
          this.$modal
              .confirm("是否确认结束当前班组作业？")
              .then(function() {
                  return updateteam(id);
              })
              .then(() => {
                  this.getList();
                  this.$modal.msgSuccess("结束成功");
              })
              .catch(() => {});
      },
  },
};
</script>

<style>
